<template>
  <el-row>
    <el-button type="primary" @click="testScreenInfo">获取屏幕信息参数</el-button>
  </el-row>
  <br/>
  <el-row>
    <el-col :span="12">
      <canvas
          id="cooling-wall-overview"
          :width="canvas.width"
          :height="canvas.height"
          style="background-color: rgb(252, 252, 252); border: 1px solid black"
      ></canvas>
    </el-col>
    <el-col :span="12">
      <svg ref="svg1" id="svg1" :width="svg.width" :height="svg.height" style="border: 1px solid red"
           xmlns="http://www.w3.org/2000/svg">
        <g id="direct-x" transform="translate(0.5,0.5)">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="0.5" fill="red"/>
        </g>
      </svg>
    </el-col>
  </el-row>
</template>

<script>
import {draw,refresh} from '@/svgutil/canvas-draw';
import {draw as svgDraw,refresh as svgRefresh} from '@/svgutil/svg-draw';
import {defineData} from "@/views/wall/overview-data";
import {drawDataInitScale, round} from '@/svgutil/comm-method';

export default {
  name: "roof-test-2",
  data() {
    return {
      canvas: {
        initWidth: 500,
        initHeight: 800,
        width: 500,
        height: 800,
      },
      svg: {
        initWidth: 500,
        initHeight: 800,
        width: 500,
        height: 800,
      },

      values: {
        'P001': {v: 1.23, w: 0},
        'P002': {v: 2.99, w: 1},
      },
      drawDataList: [],
      option: {
        totalScaleMax: 32,
        totalScaleMin: 0.25,
        listeners: ['zoom','move','reset'],
      },
      canvasEle: null,
      svgEle: null,
    }
  },
  created() {
  },
  mounted() {
    this.canvasEle = draw("cooling-wall-overview", this.createInitData, this.values, this.option);
    this.svgEle = svgDraw("svg1", this.drawDataList, this.values,this.createInitData,this.option);
    setInterval(() => {
      this.values.P001 = {v: round(Math.random() * 100,2), w: Math.round(Math.random())};
      refresh(this.canvasEle,this.drawDataList,this.values);
      svgRefresh(this.svgEle,this.drawDataList,this.values)
    },5000);
  },
  methods: {
    createInitData(){
      this.drawDataList[0] = defineData(this.values);
      //初始放大倍数
      //drawDataInitScale([]);
      let scale = window.devicePixelRatio;
      this.canvas.width = Math.round(this.canvas.initWidth / scale);
      this.canvas.height = Math.round(this.canvas.initHeight / scale);
      this.svg.width = Math.round(this.svg.initWidth / scale);
      this.svg.height = Math.round(this.svg.initHeight / scale);
      drawDataInitScale(this.drawDataList, 1 / scale,false,false);
      return this.drawDataList;
    },
    testScreenInfo(){
      console.log('网页可见区域宽： ' + document.body.clientWidth);
      console.log('网页可见区域高： ' + document.body.clientHeight);
      console.log('网页可见区域宽： ' + document.body.offsetWidth);
      console.log('网页可见区域高： ' + document.body.offsetHeight);
      console.log('网页正文全文宽： ' + document.body.scrollWidth);
      console.log('网页正文全文高： ' + document.body.scrollHeight);
      console.log('网页被卷去的高： ' + document.body.scrollTop);
      console.log('网页被卷去的左： ' + document.body.scrollLeft);
      console.log('网页正文部分上：' + window.screenTop);
      console.log('网页正文部分左：' +  window.screenLeft);
      console.log('屏幕物理分辨率的高： ' + window.screen.height);
      console.log('屏幕物理分辨率的宽：' + window.screen.width);
      console.log('屏幕可用工作区高度：' + window.screen.availHeight);
      console.log('屏幕可用工作区宽度：' + window.screen.availWidth);
      console.log('屏幕缩放因子：' + window.devicePixelRatio);
      console.log('屏幕逻辑分辨率(缩放因子与物理分辨率的乘积)：' + window.screen.width * window.devicePixelRatio);
    }
  }
}
</script>

<style scoped>
#svg1 {
  /*background: #2c3e50;*/
}

.line {

}
</style>